<template>
  <div style="cursor: pointer;margin: 0 -20px;" @click="select">
    <div style="text-align: center;">
      <i class="el-icon-thumb" />
    </div>

    <el-dialog title="选择图标" :visible.sync="dialog.visible" width="80%" height="75%">
      <icons-dialog :value="config.value" @input="input" />
    </el-dialog>
  </div>
</template>

<script>
import IconsDialog from '@/components/selectIcon/IconsDialog'
export default {
  name: 'SelectIconfont',
  components: { IconsDialog },
  props: {
    config: {
      type: Object,
      default () { return {} }
    }
  },
  data () {
    return {
      dialog: {
        visible: false
      }
    }
  },
  methods: {
    select () {
      this.dialog.visible = true
    },
    input (v) {
      this.dialog.visible = false
      this.$emit('input', v)
    }
  }
}
</script>

<style scoped>

</style>
